<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="./JQurey.js"></script>
    <script src="./date.js"></script>
    <style>
            * {
                padding: 0;
                margin: 0;
            }
            .list {
                list-style: none;
                margin: 0 auto;
                width: 80%;
                height: 40px;
                border: 1px solid #999;
            }
            .list>li {
                float: left;
                margin-left: 120px;
                color: #666;
                line-height: 40px;
            }
            .ul1,.ul2 {
                width: 80%;
                height: 80px;
                margin: 0 auto;
                list-style: none;
                border: 1px solid #999;
            }
            li {
                /* margin-left: 120px; */
                float: left;
                /* width: 300px; */
                position: relative;
                /* background-color: aqua; */
            }
            img {
                height: 80px;
                position: absolute;
            }
           .sp1 {
               display: inline-block;
                margin-top: 30px;
              
           }
           .sp2 {
               display: inline-block;
               margin-left: 80px;
               position: absolute;
               width: 200px;
               /* top: 20px; */
           }
           .li1 {
               margin-left: 120px;
               
               
           }
           .li2 {
               margin-left: 490px;
               margin-top: 30px;
           }
           .li3 {
               margin-top: 30px;
               margin-left: 110px;
           }
           .btn1 {
               width: 30px;
               height: 20px;
           }
           .btn2 {
               width: 30px;
               height: 20px;
           }
           .li4 {
                margin-left: 80px;
                margin-top: 30px;
                font-weight: bolder;
           }
           .li5 {
               margin-top: 20px;
               margin-left: 100px;
           }
           .sp3 {
               display: inline-block;
               margin-left: 15px;
           }
           .sp4,.sp5 {
               color: red;
           }
    </style>
</head>
<body>
    <ul class="list">
        <li><input class="ipt0" type="checkbox">全选</li>
        <li>产品信息</li>
        <li>规格</li>
        <li>单价(元)</li>
        <li>数量</li>
        <li>小计</li>
        <li>操作</li>
    </ul>
    <div class="div1">

    </div>
    <!-- <ul class="ul1">


    </ul> -->
   
</body>
</html>
    <script>
        $(function(){
            console.log($(list));
             // 购物车中的数据 保证类型是数组，可以是空数组但不能是null
            var cartList = JSON.parse(localStorage.getItem('cartList')) || [];
            var cartGoods = [];
            window.onload = function(){
                // 根据id获取购物车中的数据
                getDataById();

            }
            function getDataById(){
                if(cartList.length){
                    // 购物车有内容
                    $.each(cartList,function(i,item){
                        console.log(item);
                        $.each(list,function(num,goods){
                             // 选择购物车中的商品，存入数组
                             if(goods.id == item){
                                goods.num = 1;
                                cartGoods.push(goods);
                             }
                        })
                    })
                    console.log(cartGoods);
                    // 渲染页面
                    renderTable(cartGoods);
                }else{
                    var content = `<li>购物车为空，买买买！</li>`
                    $('.ul1').html(content);
                }
            }

            function renderTable(data){
                var str = "";
                $.each(data,function(i,item){
                    str += `
                    <ul class="ul1">
                    <li class="li1">
                <span class="sp1"><input class="ipt1" type="checkbox"></span><img src=http:${list[0].image}>
                <span class="sp2">${item.name}</span>
            </li>
            <li class="li2">￥${item.price}</li>
            <li class="li3">
            <button class="btn1">-</button>
            <span class="count">1</span>
            <button class="btn2">+</button>
                </li>
            <li class="li4">￥<span class="sp4" money="${item.price}">${item.price}</span></li>
            <li class="li5"><p>移入收藏</p>
                <span class="sp3">删除</span>
                </li>
                </ul>
            `
            $('.div1').html(str);
                })
               
            }
            $('.div1').on('click','.btn2',function(){
                // 修改数量
               console.log($(this).siblings('.count').text()); // 打印数量
                var num1 = $(this).siblings('.count').text()-0;
                num1++;
                $(this).siblings('.count').text(num1);
                // 修改小计
                console.log($(this).parent().siblings('.li4').children('.sp4').text()); //打印小计
                var money = $(this).parent().siblings('.li4').children('.sp4').attr('money'); // 获取单价
                var num2 = $(this).parent().siblings('.li4').children('.sp4').text() - 0;
                num2 = money * num1
                $(this).parent().siblings('.li4').children('.sp4').text(parseFloat(num2).toFixed(2));
                
            })
            $('.div1').on('click','.btn1',function(){
                // 修改数量
               console.log($(this).siblings('.count').text());
                var num1 = $(this).siblings('.count').text()-0;
                if(num1 > 0){
                    num1--;
                $(this).siblings('.count').text(num1);
                }
                // 修改小计
                console.log($(this).parent().siblings('.li4').children('.sp4').text()); //打印小计
                var money = $(this).parent().siblings('.li4').children('.sp4').attr('money'); // 获取单价
                var num2 = $(this).parent().siblings('.li4').children('.sp4').text() - 0;
                num2 = money * num1
                $(this).parent().siblings('.li4').children('.sp4').text(parseFloat(num2).toFixed(2));
            })
            
        

            // $('.btn2').eq(0).click(function(){
            //     // 小计
            //     var money = $('.sp4').text()-0;
            //     money += list[0].price ;
            //     $('.sp4').text(parseFloat(money).toFixed(2));

            //     // 数量
            //     var num1 = $('.count').eq(0).text()-0;
            //     num1++;
            //     $('.count').eq(0).text(num1);
                
            // })
            // $('.btn1').eq(0).click(function(){
            //     //数量
            //     var num1 = $('.count').eq(0).text()-0;
            //     if(num1 > 1){
            //     num1--;
            //     //小计
            //     $('.count').eq(0).text(num1);
            //     var money = $('.sp4').text()-0;
            //     money -= list[0].price ;
            //     $('.sp4').text(parseFloat(money).toFixed(2));
            //     }
            // })

            // $('.btn2').eq(1).click(function(){
            //     // 小计
            //     var money = $('.sp5').text()-0;
            //     money += list[1].price ;
            //     $('.sp5').text(parseFloat(money).toFixed(2));

            //     // 数量
            //     var num1 = $('.count').eq(1).text()-0;
            //     num1++;
            //     $('.count').eq(1).text(num1);
            // })

            // $('.btn1').eq(1).click(function(){
            //     //数量
            //     var num1 = $('.count').eq(1).text()-0;
            //     if(num1 > 1){
            //     num1--;
            //     //小计
            //     $('.count').eq(1).text(num1);
            //     var money = $('.sp5').text()-0;
            //     money -= list[1].price ;
            //     $('.sp5').text(parseFloat(money).toFixed(2));
            //     }
            // })

            
            // $('.ipt0').click(function(){
            //     $('input')[1].checked = true;
            //     $('input')[2].checked = true;
            //     if($('input')[0].checked == false){
            //         $('input')[1].checked = false;
            //         $('input')[2].checked = false;
            //     }
            // })
            // function fn(i){
            //     $(i).click(function(){
            //     if($('input')[1].checked == true && $('input')[2].checked == true){
            //        $('input')[0].checked = true;
            //     }else{
            //         $('input')[0].checked = false;
            //     }
            // })
            // }
            // fn('.ipt1');
            // fn('.ipt2');
            
            // $('.ipt2').click(function(){
            //     if($('input')[1].checked == true && $('input')[2].checked == true){
            //        $('input')[0].checked = true;
            //     }else{
            //         $('input')[0].checked = false;
            //     }
            // })
            
            
           
        })



    </script>